import router from '@/router'
import store from './store'

import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式
NProgress.configure({ showSpinner: false }) // 关掉右上角转的小圆圈
const whiteList = ['/login', '/404']
// 前置守卫
router.beforeEach(async(to, from, next) => {
  NProgress.start() // 进度条开始加载
  const token = store.getters.token
  // console.log(token)
  if (token) {
    if (to.path === '/login') {
      next('/')
      // 非放行，拦截到任何一个页面的时候不会触发afterEach
      // 进度条不会停止 会一直在 进不去 后置守卫里的逻辑
      // 要在这里 手动的加一个 去停止 进度条
      NProgress.done()
    } else {
      // 阻止多次调用接口
      const userInfo = store.state.user.userInfo
      // console.log('用户信息', userInfo) // 用户信息打印无数据
      // 如果没有用户信息的id，说明数据是空的  才调用vuex中的 获取getUserInfo获取用户信息信息
      if (!userInfo.userId) {
        const { roles: { menus }} = await store.dispatch('user/getUserInfo')
        // console.log('用户信息,权限控制会用到', res)

        // 调用vuex中的filterRoutes  menus代表可访问的动态页面,传递给vuex
        const otherRoutes = await store.dispatch('permission/filterRoutes', menus)
        // console.log('1', otherRoutes)

        // addRoutes - 添加路由规则们 参数是数组 数组里每一个对象就是路由规则
        // 固定语法 addRoutes + 回首掏 - 保证添加的路由规则是完整的 完成添加了
        router.addRoutes([...otherRoutes, { path: '*', redirect: '/404', hidden: true }]) // 动态添加可以访问路由
        //  to是去哪里 next又去了to的地方  设置replace: true 所以这个导航不会留下历史记录
        next({ ...to, replace: true })

        // 404问题的产生原因：404页面必须写在最后 添加好动态路由404不是在最后
        // 左侧菜单不显示的原因，因为routes不是响应式的 解决办法 vuex
      }
      next()
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

// 后置守卫
router.afterEach((to, from) => {
  NProgress.done() // 进度条加载完成
})
